<template>
  <div class="projectListModal">
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="1598px"
      title=""
      wrapClassName="project-list-modal-container"
      @cancel="handleClose()"
    >
      <div class="project-list-modal-body">
        <!-- 标题 -->
        <div class="header">
          <div class="title">项目列表</div>
          <div class="close-btn" @click="handleClose()"></div>
        </div>
        <!-- 主体 -->
        <div class="body">
          <vxe-table
            ref="xTable"
            height="auto"
            align="center"
            show-overflow
            border="inner"
            :data="tableData"
            :column-config="{ resizable: true }"
            size="small"
            :loading="loading"
          >
            <vxe-column field="proName" title="项目名称" min-width="200">
            </vxe-column>
            <vxe-column
              field="workArea"
              width="140"
              :title="`开工天数/总工期\n(天)`"
            >
              <template #default="{ row }">
                <span class="color">{{ row.startDay }}</span
                >/{{ row.totalDay }}
              </template>
            </vxe-column>
            <vxe-column field="engTypeDesc" title="完成进度" width="120">
              <template #default="{ row }">
                <span class="color">{{ row.rate }}</span>
              </template>
            </vxe-column>
            <vxe-column field="investmentScale" width="120" title="状态">
              <template #default="{ row }">
                <div
                  class="status-td"
                  :class="[
                    !row.status && 'no-data',
                    getStatusClassName(row.status),
                  ]"
                >
                  {{ getStatusName(row.status) }}
                </div>
              </template>
            </vxe-column>
            <vxe-column field="constructionUnit" :title="`计划总投资\n(万元)`">
              <template #default="{ row }">
                <span class="color">{{
                  Number(row.totalPlanInvestment).toLocaleString()
                }}</span>
              </template>
            </vxe-column>
            <vxe-column field="typeDesc" :title="`实际总投资\n(万元)`">
              <template #default="{ row }">
                <span class="color">{{
                  Number(row.totalCompleteInvestment).toLocaleString()
                }}</span>
              </template>
            </vxe-column>
            <vxe-column field="createTime" :title="`本年度计划投资\n(万元)`">
              <template #default="{ row }">
                <span class="color">{{
                  Number(row.yearPlanInvestment).toLocaleString()
                }}</span>
              </template>
            </vxe-column>
            <vxe-column
              field="responsiblePerson"
              :title="`本年度实际投资\n(万元)`"
            >
              <template #default="{ row }">
                <span class="color">{{
                  Number(row.yearCompleteInvestment).toLocaleString()
                }}</span>
              </template>
            </vxe-column>
            <vxe-column width="120" :title="`问题数\n(个)`">
              <template #default="{ row }">
                <span class="color">{{ row.issueTotal }}</span>
              </template>
            </vxe-column>
            <vxe-column width="120" :title="`未处理数\n(个)`">
              <template #default="{ row }">
                <span class="color">{{ row.notDealCount }}</span>
              </template>
            </vxe-column>
            <vxe-column width="120" :title="`投入人数\n(人)`">
              <template #default="{ row }">
                <span class="color">{{ row.userNum }}</span>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <!-- 分页 -->
        <!-- <div class="pager">
          <a-pagination
            v-model="pager.page"
            :total="pager.total"
            :page-size="pager.pageSize"
            :show-total="(total) => `共${total}条 `"
            @change="pageChange"
          />
        </div> -->
      </div>
    </a-modal>
  </div>
</template>
<script>
//[弹窗]选择图标
import { axios } from "@/utils/request";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    image: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      tableData: [],
      tableColumns: [
        { type: "seq", title: "序号", width: 60 },
        { field: "name", title: "姓\n名", width: 100 },
        { field: "age", title: "年\n龄", width: 100 },
        // ... 其他列
      ],
      loading: false,
      //分页
      pager: {
        page: 1,
        pageSize: 32,
        total: 0,
      },
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
    },
  },
  mounted() {},
  methods: {
    //查询列表数据
    getData() {
      return new Promise((resolve, reject) => {
        this.loading = true;
        axios
          .post(
            "/probusiness/bigScreen/projectStatisticsList",
            {},
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            this.tableData = res?.data ?? [];
          })
          .catch((_) => {
            this.tableData = [];
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //状态名称
    getStatusName(code = "") {
      switch (code) {
        case "scheduleStatus.01":
          return "正常完成";

        case "scheduleStatus.02":
          return "超期完成";

        case "scheduleStatus.03":
          return "提前完成";

        case "scheduleStatus.00":
          return "前期阶段";

        case "scheduleStatus.10":
          return "竣工阶段";

        default:
          return "--";
      }
    },

    getStatusClassName(code) {
      switch (code) {
        case "scheduleStatus.01":
          return "zcwc";

        case "scheduleStatus.02":
          return "cqwc";

        case "scheduleStatus.03":
          return "tqwc";

        case "scheduleStatus.00":
          return "qqjd";

        case "scheduleStatus.10":
          return "jgjd";

        default:
          return "";
      }
    },

    //监听分页切换
    pageChange(page, pageSize) {
      this.pager.page = page;
      this.pager.pageSize = pageSize;
    },

    //关闭
    handleClose() {
      this.$emit("update:visible", false);
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.project-list-modal-container {
  .ant-modal-content {
    border-radius: 0;
    background-color: transparent;
    box-shadow: none;
    .ant-modal-close {
      display: none;
    }
    .ant-modal-body {
      padding: 0 !important;
      .project-list-modal-body {
        height: 667px;
        background: rgba(1, 30, 38, 0.8);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        border: 1px solid rgba(100, 193, 220, 0.6);
        border-radius: 0 8px 0 0;
        .header {
          height: 36px;
          flex-shrink: 0;
          background: linear-gradient(90deg, #00a7d8, rgba(0, 77, 99, 0));
          position: relative;
          &::before {
            content: "";
            display: flex;
            height: 40px;
            width: 300px;
            position: absolute;
            top: 0;
            left: 0;
            background: url("~@/assets/img/portalEntry/modal_icon_1.png");
            background-size: 100% 100%;
          }
          &::after {
            content: "";
            display: flex;
            height: 100%;
            width: 75px;
            position: absolute;
            top: -1px;
            right: -1px;
            background: url("~@/assets/img/portalEntry/modal_icon_2.png");
            background-size: 100% 100%;
          }
          .title {
            position: absolute;
            height: 100%;
            color: #fff;
            font-size: 16px;
            letter-spacing: 1px;
            line-height: 36px;
            padding-left: 12px;
            position: relative;
            &::before {
              content: "";
              position: absolute;
              height: 100%;
              width: 21px;
              background: url("~@/assets/img/portalEntry/modal_icon_3.png");
              background-size: 100% 100%;
              left: -1px;
              top: 0;
            }
          }
          .close-btn {
            position: absolute;
            width: 16px;
            height: 16px;
            background: url("~@/assets/img/portalEntry/modal_icon_4.png")
              no-repeat center center;
            background-size: 12px 12px;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            z-index: 9;
          }
        }
        .body {
          flex: 1;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          box-sizing: border-box;
          padding: 20px 20px 20px 20px;
          .vxe-table {
            .vxe-table--border-line {
              background: none;
              border: none !important;
            }
            .vxe-table--render-wrapper {
              .vxe-table--main-wrapper {
                .vxe-table--header-wrapper {
                  background: rgba(0, 213, 255, 0.4) !important;
                  .vxe-table--header-border-line {
                    border: none !important;
                  }
                  .vxe-body--x-space {
                    border: none !important;
                  }
                  .vxe-header--row {
                    .vxe-header--column {
                      background-image: none;
                    }
                    .vxe-cell--title {
                      color: #eef9ff;
                    }
                  }
                }
                .vxe-table--body-wrapper {
                  .vxe-body--x-space,
                  .vxe-body--y-space {
                    background: none;
                    border: none !important;
                  }
                  table {
                    background: none;
                    border: none !important;
                    .vxe-body--row {
                      background: rgba(0, 213, 255, 0.05);
                      &:nth-child(even) {
                        background: rgba(0, 213, 255, 0.15);
                      }
                    }
                    .vxe-body--column {
                      border-image: none !important;
                      color: #b8f3ff;
                      background-image: none !important;
                      .color {
                        color: #00d5ff;
                      }
                      .status-td {
                        align-items: center;
                        width: 100%;
                        justify-content: center;
                        display: flex;
                        &::before {
                          content: "";
                          display: flex;
                          width: 6px;
                          height: 6px;
                          border-radius: 50%;
                          margin-right: 8px;
                        }
                        &.no-data {
                          &::before {
                            display: none;
                          }
                        }
                        //前期阶段
                        &.qqjd {
                          &::before {
                            background: #419fff;
                          }
                        }
                        //竣工阶段
                        &.jgjd {
                          &::before {
                            background: #1aeebb;
                          }
                        }
                        //正常完成
                        &.zcwc {
                          &::before {
                            background: #00d5ff;
                          }
                        }
                        //超期完成
                        &.cqwc {
                          &::before {
                            background: #ff2d2d;
                          }
                        }
                        //提前完成
                        &.tqwc {
                          &::before {
                            background: #23ce16;
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
            .vxe-loading {
              background-color: unset;
            }
          }
        }
        .pager {
          height: 70px;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          justify-content: flex-end;
          padding: 0 24px;
          box-sizing: border-box;
          .ant-pagination {
            .ant-pagination-total-text {
              color: #b8f3ff;
            }
            .ant-pagination-item {
              height: 24px;
              line-height: 22px;
              border-radius: 4px !important;
              min-width: 24px;
              border-color: #b8f3ff;
              background: transparent;
              a {
                color: #b8f3ff;
              }
              &.ant-pagination-item-active {
                border-color: #00d5ff;
                a {
                  color: #00d5ff;
                }
              }
            }
            .ant-pagination-item-ellipsis {
              color: #b8f3ff;
            }
            .ant-pagination-prev,
            .ant-pagination-next {
              width: 24px;
              height: 24px;
              line-height: 24px;
              min-width: auto;
              .ant-pagination-item-link {
                border-color: #b8f3ff;
                background: transparent;
                color: #b8f3ff;
              }
            }
          }
        }
      }
    }
  }
}
</style>
